<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<c:set value="${pageContext.request.contextPath}" var="path" scope="page"/>
<!DOCTYPE HTML>
<html>

<head>
  <title>修改头像</title>
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet">
  <!-- CSS -->
  <link rel="stylesheet" href="${path}/pet/home/css/animate.css">
  <link rel="stylesheet" href="${path}/pet/home/css/bootstrap.css">
  <link rel="stylesheet" href="${path}/pet/login/css/login.css">
  <!-- jQuery -->
  <script src="${path}/pet/home/js/jquery.min.js"></script>
  <script src="${path}/pet/home/js/jquery.bootstrap.js"></script>
  <script src="${path}/pet/user/js/ajaxfileupload.js"></script>
  <script src="${path}/pet/user/js/jquery.form.min.js"></script>
  <script src="${path}/pet/home/js/mobile_tab.js"></script>
</head>

<body>
<div id="page">
  <div class="page-inner">
    <!-- 导航栏 -->
    <nav class="gtco-nav">
      <div class="gtco-container">
        <div class="row">
          <div class="col-xs-8 text-right menu-1" style="width:1080px">
            <ul>
              <li><a href="${path}/home">首页</a></li>
              <li><a href="${path}/chat">社交</a></li>
              <li><a href="${path}/chat?role=kf">客服</a></li>
              <li><a href="${path}/myAccount">我的</a></li>
            </ul>
          </div>
        </div>
      </div>
    </nav>
    <header id="gtco-header" class="gtco-cover" role="banner" style="background-image:url(${path}/pet/login/images/C_1.jpg)">
      <div class="overlay"></div> <!-- 调节背景色的透明度 -->
      <div class="gtco-container">
        <div class="row">
          <div class="col-md-12 col-md-offset-0 text-left">
            <div class="row row-mt-15em" style="margin-top: 11em;">
              <!-- 网页左侧的字 -->
              <div class="col-md-7 mt-text animate-box header fadeInUp animated-fast" data-animate-effect="fadeInUp" style="margin-top: 15em;">
                <span class="intro-text-small">宠物保险平台</span>
                <h1>用心保护您的宠物</h1>
              </div>
              <div class="col-md-4 col-md-push-1 animate-box regist" data-animate-effect="fadeInRight">
                <div class="form-wrap">
                  <div class="tab-menu">
                    <span>用户登录</span>
                  </div>
                  <div class="tab-content">
                    <form action="#">
                      <div class="row form-group">
                        <div class="col-md-12">
                          <label for="uid">用户ID</label>
                          <input type="text" class="form-control" disabled="" id="uid" value="${user.id}">
                        </div>
                      </div>
                      <div class="row form-group">
                        <div class="col-md-12">
                          <label for="username">用户名</label>
                          <input type="text" class="form-control" disabled="" id="username" value="${user.username}">
                        </div>
                      </div>
                      <div class="row form-group">
                        <div class="col-md-12">
                          <label>修改头像（请选择图片文件：JPG）</label>
                          <div id="uploadForm">
                            <input id="file" type="file" multiple="multiple"/>
                            <img src="${path}/avatar/${user.headUrl}" id="img0">
                          </div>
                        </div>
                      </div>
                      <div class="row form-group">
                        <div class="col-md-12">
                          <button id="upload" type="button" class="btn btn-primary">保存</button>
                        </div>
                      </div>
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
  </div>
</div>
</body>

<script>
  var objUrl = "";
  var user="<%=session.getAttribute("user")%>";
  var uid = ${user.id};

  function getObjectURL(file) {
    var url = null;
    if (window.createObjectURL != undefined) {
      url = window.createObjectURL(file);
    } else if (window.URL != undefined) {
      url = window.URL.createObjectURL(file);
    } else if (window.webkitURL != undefined) {
      url = window.webkitURL.createObjectURL(file);
    }
    return url;
  }
  //回显图片
  $("#file").change(function(){
    objUrl = getObjectURL(this.files[0]);
    if (objUrl) {
      $("#img0").attr("src", objUrl);
    }
  }) ;
  //上传图片
  $("#upload").on("click", function() {
    var s = $('#file')[0].files[0];
    console.log(s);

    var formData = new FormData();
    formData.append("pic", s);
    formData.append("uid", uid);

    var img = new Image();    // 创建对象
    var img_url = objUrl;
    img.src = img_url;     // 改变图片的src，在我的页面显示图片

    if(img.width != img.height) {
      alert("请选择正方形图片");
    } else {
      $.ajax({
        url: "/user/uploadPic",
        type: 'POST',
        data: formData,
//        cache: false,
        processData: false,
        contentType: false,
        success: function(result) {
          console.log(result.msg);
          if(result.msg=="上传成功"){
            window.location.href = '${path}/myAccount';
          }
          if(result.msg=="上传失败"){
            alert("上传失败！")
          }
          if(result.msg=="仅允许扩展名为.jpg格式上传"){
            alert("仅允许扩展名为.jpg格式上传！")
          }
          if(result.msg=="没有上传文件"){
            alert("没有上传文件！")
          }
        },
        error: function() {
          console.log("失败");
        }
      });
    }
  });

</script>

<style>
  #img0 {
    width: 15rem;
    height: 15rem;
    margin-top: 10px;
  }
  #file {
    display: inline-block;
  }
  /*#badge {*/
    /*padding: 2px 5px;  /!* 不需要定义height与width，添加合适的padding使圆圈随字符长短变化而改变 *!/*/
    /*line-height: 20px;*/
    /*text-align: center;*/
    /*background-color: red;*/
    /*color: white;*/
    /*font-size: 12px;*/
    /*font-weight: 700;*/
    /*border-radius: 50%;*/
    /*/!*position: relative;*!/*/
    /*/!*bottom: 45px;*!/*/
    /*/!*left: -20px;*!/*/
  /*}*/
</style>

</html>



